<template>
	<view class="container">
		<image src="../../static/ellipse.png" class="top-bg" mode="widthFix"></image>
		<view class="scanCode-box">
			
		<view class="scanCode-bg">
			<view class="scan-item">
				<text>激活码是否有效：</text>
				<text>是</text>
			</view>
			<view class="scan-item">
				<text>激活日期：</text>
				<text>{{today}}</text>
			</view>
			<view class="scan-item">
				<text>有效期：</text>
				<text>90天</text>
			</view>
			
			<view class="scanCode-btn" hover-class="scanCode-hover-btn" @click="VerifyCardMed" v-if="phoneFlag">确认激活</view>
			<button class="scanCode-btn" style="margin-top: 80rpx!important;" v-else open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">确认激活</button>
		</view>
		<image src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/default/circular.png" class="bottom-bg" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import { VerifyCardCode } from '../../apis/invite.js';
	export default {
		data() {
			return {
				detail:{},
				today:'',
				phoneFlag:false
			};
		},
		
		onShow() {
			let mineInfo = uni.getStorageSync('mineInfo');
			this.mineInfo = mineInfo;
			if(mineInfo.phone && mineInfo.phone.length ==11){
				this.phoneFlag = true;
			}else{
				this.phoneFlag = false;
			}
		},
		
		onLoad(options) {
			
			let detail = JSON.parse(options.detail);
			console.log(detail,"detail")
			this.detail = detail;
			let newTime = new Date();
			let month = Number(newTime.getMonth()+1)<10? '0' +  Number(newTime.getMonth()+1): Number(newTime.getMonth()+1);
			let day = Number(newTime.getDate())<10? '0' + newTime.getDate():newTime.getDate();
			this.today = newTime.getFullYear() + '-' + month + '-' + day;
		},
		
		methods:{
			// 获取手机号授权
			onGetPhoneNumber(e){
				let that = this;
				app.GetMobile(e,function(e){
					that.phoneFlag = true;
					app.getUserInfo(function(info){
						that.VerifyCardMed();
						that.mineInfo = info;
					});
				});
			},
			VerifyCardMed(){
				let that = this;
				VerifyCardCode({
					id:that.detail.id
				}).then( res => {
					console.log(res,'核销结果');
					switch(res.code){
						case 200:
							uni.showToast({
								title:'激活成功',
								icon:'none',
								duration:1500,
								success() {
									setTimeout(function(){
										uni.switchTab({
											url:'../mine/mine'
										})
									},1500);
								}
							})
						break;
						default:
							uni.navigateTo({
								url:`/pages/scanFail/scanFail?tips=${res.message}`
							})
						break;
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F9C500;
	}
</style>
<style lang="scss">
.top-bg {
	width: 298rpx;
	height: 400rpx;
	position: fixed;
	top: 0;left: 0;
	z-index: -1;
}

.scanCode-box {
	height: 680rpx;
	margin: 0 auto;
	margin-top: 120rpx;
	padding:0 40rpx;
	width: 550rpx;
	position: relative;
}

.scanCode-bg{
	padding: 70rpx 40rpx;
	width: 550rpx;
	border-radius: 24rpx;
	background-color: #fff;
	font-size: 34rpx;
	color: #222222;
	z-index: 5;
	position: absolute;
	top: 0;
	left: 0;
	
	.scan-item {
		border-bottom:1rpx solid #E6E6E6;
		height: 120rpx;
		line-height: 120rpx;
		padding: 0 30rpx;
		
		text:nth-child(2){
			color: #FA6400;
		}
	}
	.scanCode-btn {
		width: 552rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #FA6400;
		border-radius: 50rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		font-size: 36rpx;
		color: #000000;
		text-align: center;
	}
	.scanCode-hover-btn {
		background: rgba(247, 181, 0, 0.8);
	}
}

.bottom-bg {
	width: 300rpx;
	height: 300rpx;
	z-index: -1;
	position: absolute;
	bottom: -252rpx;
	right: 15rpx;
}

</style>
